﻿<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link href="../../lib/ligerUI/skins/Aqua/css/ligerui-all.css"
	rel="stylesheet" type="text/css" />
<script src="../../lib/jquery/jquery-1.5.2.min.js"
	type="text/javascript"></script>
<script src="../../lib/ligerUI/js/core/base.js" type="text/javascript"></script>
<script src="../../lib/ligerUI/js/plugins/ligerDrag.js"
	type="text/javascript"></script>

<script type="text/javascript">

        function changeZIndex(obj)
        {
            $(obj).css("z-index", 2).siblings("div").css("z-index", 1);
        }
        $(function ()
        {
            //	        $('#rr1,#rr3').ligerDrag({
            //	            onStartDrag: function (current)
            //	            {
            //	                changeZIndex(current.target[0]);
            //	            }
            //	        }); 

            //拖动时不使用代理
            var d = $('#rr1').ligerDrag({ proxy: false });
             
            //使用头部,使用默认代理
            $('#rr2').ligerDrag({ handler: '#rr2h' });
            //使用自定义代理
            $('#rr3').ligerDrag({ proxy: function ()
            {
                var div = $("<div class='proxy'>proxy</div>");
                div.width($(this).width());
                div.height(30);
                div.appendTo('body');
                return div;
            }
            });
            //使用副本代理
            $('#rr4').ligerDrag({ proxy: 'clone' });

            //使用副本代理,并归位
            var drag5 = $('#rr5').ligerDrag({ proxy: 'clone', revert: true });

            //其实这里可以写成：
            //var drag5 = new $.ligerui.controls.Drag({ proxy: 'clone', revert: true, target: $('#rr5')[0] });

            //绑定一个事件，改变拖动时的鼠标图标,也可以把onStartDrag作为参数传入,用bind的好处是可以多次绑定
            drag5.bind('StartDrag', function ()
            {
                //这里this就是drag5,组件管理器,类型为$.ligerui.controls.Drag

                //drag5.cursor = 'not-allowed';
                this.cursor = 'not-allowed';
            });


            //这里利用receive属性定义了一个接收区域
            var drag6 = $('#rr6').ligerDrag({ proxy: 'clone', revert: true
            , receive: '#receive'
            });
            drag6.bind('StartDrag', function ()
            {
                this.cursor = 'not-allowed';
            });
            //当进入区域时
            drag6.bind('DragEnter', function (receive, source, e)
            {
                drag6.cursor = "pointer";
                $(receive).find(".message").html("进入区域");
            });
            //在区域移动
            drag6.bind('DragOver', function (receive, source, e)
            {
                $(receive).find(".message").html("在区域移动 " + e.pageX + ":" + e.pageY);
            });
            //离开区域
            drag6.bind('DragLeave', function (receive, source, e)
            {
                this.cursor = "not-allowed";
                $(receive).find(".message").html("离开区域");
            });
            //在区域释放
            drag6.bind('Drop', function (receive, source, e)
            {
                source.hide();
                $(receive).find(".txt").val(source.find(".txt").val());
                $(receive).find(".message").html("在区域释放");
            });

        });
         
    </script>
<style type="text/css">
.proxy {
	border: 1px splid #333;
	position: absolute;
	z-index: 4;
	background: #f1f1f1;
}

.box {
	width: 80px;
	height: 80px;
	border: 1px solid #ddd;
}

.txt {
	margin: 2px;
	width: 60px;
	border: 1px solid #333;
}
</style>
</head>
<body style="padding: 10px">
	<div id="rr1" class="box"
		style="top: 100px; background: #A6DBD8; position: absolute;"></div>
	<div id="rr2" class="box"
		style="top: 100px; left: 100px; background: #AFCCF1; position: absolute;">
		<div id="rr2h"
			style="width: 100%; height: 30px; background: #95BBEC; line-height: 30px;">
		</div>
	</div>
	<div id="rr3" class="box"
		style="top: 100px; left: 200px; background: #DA9188; position: absolute;">
	</div>
	<div id="rr4" class="box"
		style="top: 100px; left: 300px; background: #9CD88A; position: absolute;">
	</div>
	<div id="rr5" class="box"
		style="top: 100px; left: 400px; background: #D09CC5; position: absolute;">
	</div>
	<div id="rr6" class="box"
		style="top: 100px; left: 500px; background: #E2DC6B; position: absolute;">
		<input type="text" class="txt" value="内容" />
	</div>
	<div id="receive"
		style="top: 300px; left: 100px; position: absolute; width: 200px; height: 200px; padding: 10px; border: 1px solid #888;"
		onSelectStart="return false">
		<p>
			<input type="text" class="txt" value="" />
		</p>
		<p>第6个例子 可以拖动到这里，试试</p>
		<p class="message"></p>
	</div>
	<div id="message"></div>
	<div style="display: none"></div>
</body>
</html>
